<template>
  <el-table
    :data="pageList"
    :default-sort="{ prop: 'date', order: 'descending' }"
    height="700px"
  >
    <el-table-column type="index" label="序号" width="80" />
    <el-table-column prop="" label="图片">
      <template #default="scope">
        <el-image
          style="width: 100px; height: 100px; margin-right: 10px"
          :src="scope.row.img1"
          :preview-src-list="[
            scope.row.img1,
            scope.row.img2,
            scope.row.img3,
            scope.row.img4,
          ]"
          :zoom-rate="1.2"
          :initial-index="4"
          fit="cover"
          preview-teleported
        ></el-image>
      </template>
    </el-table-column>
    <el-table-column prop="proname" label="名称" />
    <el-table-column prop="brand" label="品牌" />
    <el-table-column
      prop="category"
      label="分类"
      width="100"
      :filters="filters"
      :filter-method="filterHandler"
      filter-placement="bottom-end"
    >
    </el-table-column>
    <el-table-column prop="originprice" label="原价" sortable />
    <el-table-column prop="discount" label="折扣" sortable />
    <el-table-column prop="sales" label="销售" sortable />
    <!-- <el-table-column prop="isseckill" label="是否秒杀">
      <template #default="scope">
        <el-switch
          v-model="scope.row.isseckill"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          :active-value="1"
          :inactive-value="0"
          @click="editList(scope.row)"
        />
      </template>
    </el-table-column> -->
    <el-table-column prop="isseckill" label="是否秒杀">
      <template #default="scope">
        <el-switch
          v-model="scope.row.isseckill"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          :active-value="1"
          :inactive-value="0"
          @change="handleChange('isseckill', scope.row.issale, scope.row.proid)"
        />
      </template>
    </el-table-column>
    <el-table-column prop="handle" label="操作">
      <el-button type="danger">删除</el-button></el-table-column
    >
  </el-table>
  <el-pagination
    background
    layout="prev, pager, next"
    :page-size="10"
    :total="list.length"
    v-model:current-page="page"
  />
</template>

<script>
import {
  getSeckillList,
  getCategoryList,
  updateFlag,
} from "../../service/product.js";

export default {
  computed: {
    pageList() {  // 分页
      return this.list.slice((this.page - 1) * 10, this.page * 10);
    },
    filters() {  // 获取所有页面的分类
      return this.categoryList.map((item) => ({ text: item, value: item }));
    },
  },
  data() {
    return {
      value: true, // 显示开关
      list: [], // 商品列表
      categoryList: [], // 分类列表
      page: 1, // 页数
      form: {
        // 当前页和限制的页数
        count: this.page,
        limitNum: 10,
        total: 0,
      },
      list2: [],
    };
  },
  created() {
    this.getSeckillListData();
    this.getCategoryListData();
  },
  methods: {
    getSeckillListData() {
      getSeckillList({ type: "isseckill", flag: 1 }).then((res) => {
        if (res.code === "200") {
          this.list = res.data;
          console.log(this.list);
        }
      });
    },
    getCategoryListData() {
      getCategoryList().then((res) => {
        if (res.code === "200") {
          this.categoryList = res.data;
        }
      });
    },
    filterHandler(value, row, column) {
      // value 选择的分类,row 当前选择的行,column 所有的列
      console.log(value, row, column);
      const property = column["property"];
      return row[property] === value;
    },
    handleChange(type, flag, id) {
      updateFlag(type, flag, id).then((res) => {
        if (res.code === "200") {
          this.getSeckillListData();
        }
      });
    },
  },
};
</script>
<style scoped>
.tableTop {
  width: 100%;
  display: flex;
  justify-content: space-around;
  text-align: center;
}
.el-image {
  width: 70px;
  height: 100px;
  padding: 0px;
}
.el-table-column {
  height: 70px;
}
.el-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
/* deep 穿透 */
:deep(.cell) {
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* display: -webkit-box; */
  /* -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-line-orient: vertical; */
}
:deep(.el-table__row:nth-child(2n + 1)) {
  height: 150px;
}
</style>
